<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
					body{
						perspective: 500px;
					}
					
					ul {
						width: 200px;
						height: 200px;
						margin: 100px auto;
						position: relative;
						
						transform-style: preserve-3d;
						
						/* transform: rotateY(0deg) rotateX(0deg); */
						animation: adrot 16s linear infinite;
					}
					
					ul li {
						width: 200px;
						height: 200px;
						font-size: 50px;
						line-height: 200px;
						text-align: center;
						list-style: none;
						position: absolute;
						top: 0;
						left: 0;
					}
					ul li img{
						/* 父元素被拉伸，子元素也会跟着被拉伸 */
						width: 200px;
						height: 200px;
					}
		
					ul li:nth-child(1) {
						/* 左 */
						/* background: red; */
						transform: translateX(-100px) rotateY(-90deg) translateZ(40px);
					}
						/* 右 */
					li:nth-child(2) {
						/* background: green; */
						transform: translateX(100px) rotateY(90deg) translateZ(40px);
					}
					
					  /* 上 */
					li:nth-child(3) {
						/* background: blue; */
						transform: translateY(-100px) rotateX(90deg) scale(1.4,1);
					}
						
						/* 下 */
					li:nth-child(4) {
						/* background: purple; */
						transform: translateY(100px) rotateX(-90deg) scale(1.4,1);
					}
						
						/* 前 */
					li:nth-child(5) {
						/* background: yellow; */
						transform: translateZ(100px) scale(1.4,1);
					}
		
					li:nth-child(6) {
						/* background: pink; */
						transform: translateZ(-100px) rotateX(180deg) scale(1.4,1);				
					}
					
					@keyframes adrot{
						from{
							transform: rotateX(0deg);
						}
						to{
							transform: rotateX(360deg);
						}
					}
				</style>
			</head>
			<body>
				<ul>
					<!-- <li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li> -->
					<li>1</li>
					<li>2</li>
					<li><img src="img/food-1.jpg" alt=""></li>
					<li><img src="img/food-2.jpg" alt=""></li>
					<li><img src="img/food-3.jpg" alt=""></li>
					<li><img src="img/food-4.jpg" alt=""></li>					
				</ul>
			</body>
		</html>
		

